import React, { Component } from "react";
import {Progress} from 'antd-mobile'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rateList: [1.0, 1.25, 1.5, 2.0],
      playRate: 1.0,
      isPlay: false,
      isMuted: false,
      volume: 100,
      allTime: 0,
      currentTime: 0,
      progress: 0,
      index: 0,
      list: ()=>{}
    };
  }

  componentDidMount() {}

  formatSecond(time) {
    const second = Math.floor(time % 60);
    let minite = Math.floor(time / 60);
    return `${minite}:${second >= 10 ? second : `0${second}`}`;
  }

  // 该视频已准备好开始播放
  onCanPlay = () => {
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    this.setState({
      allTime: audio.duration,
    });
  };

  playAudio = () => {
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    audio.play();
    this.setState({
      isPlay: true,
    });
  };

  pauseAudio = () => {
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    audio.pause();
    this.setState({
      isPlay: false,
    });
  };

  onMuteAudio = () => {
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    this.setState({
      isMuted: !audio.muted,
    });
    audio.muted = !audio.muted;
  };

  changeTime = (e) => {
    const { value } = e.target;
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    var progress=value/this.state.allTime*100
    this.setState({
      currentTime: value,
      progress: progress,
    });
    audio.currentTime = value;
    if (value === audio.duration) {
      this.setState({
        isPlay: false,
      });
    }
  };

  // 当前播放位置改变时执行
  onTimeUpdate = () => {
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    // console.log(audio.currentTime)
    var progress=audio.currentTime/this.state.allTime*100
    // console.log(progress)
    this.setState({
      currentTime: audio.currentTime,
      progress: progress,
    });
    if (audio.currentTime === audio.duration) {
      this.setState({
        isPlay: false,
      });
    }
    this.props.onChange(this.state.currentTime)
  };

  changeVolume = (e) => {
    const { value } = e.target;
    const { id } = this.props;
    const audio = document.getElementById(`audio${id}`);
    audio.volume = value / 100;

    this.setState({
      volume: value,
      isMuted: !value,
    });
  };

  // 倍速播放
  changePlayRate = (num) => {
    // this.audioDom.playbackRate = num;
    if(this.state.index===3){
        this.state.index=0;
    }else{
        this.state.index++
    }
    this.audioDom.playbackRate = this.state.rateList[this.state.index]
    this.setState({
      playRate: num,
      index: this.state.index,
    });
  };
  // 上一首、下一首切换
  change(index){
    console.log(index)
  }

  render() {
    const { src, id } = this.props;
    
    const {
      isPlay,
      isMuted,
      volume,
      allTime,
      currentTime,
      rateList,
      playRate,
      progress
    } = this.state;

    return (
      <div>
        <audio
          id={`audio${id}`}
          src={src}
          ref={(audio) => {
            this.audioDom = audio;
          }}
          preload={"auto"}
          onCanPlay={this.onCanPlay}
          onTimeUpdate={this.onTimeUpdate}
        >
          <track src={src} kind="captions" />
        </audio>


        <div style={{display: 'flex',alignItems: 'center',margin: '0 6vw'}}>
          <span style={{color: '#fff',fontSize: 10,}}>
            {/* {this.formatSecond(currentTime) + "/" + this.formatSecond(allTime)} */}
            {this.formatSecond(currentTime)}
          </span>
          {/* <input
            type="range"
            step="0.01"
            max={allTime}
            value={currentTime}
            onChange={this.changeTime}
          /> */}
          <Progress style={{flex: 1,margin: '0 4vw'}} percent={progress} position="normal" appearTransition />
          <span style={{color: '#fff',fontSize: 10,}}>{this.formatSecond(allTime)}</span>
          <img alt='' src={require('../../imgs/share1.png')} className='share1_icon' />
        </div>

        <div className='audio_btn_box'>
            <div className='audio_menu_btn' onClick={this.state.list()}>
                <img alt='' src={require('../../imgs/menu.png')} />
                <p>播放列表</p>
            </div>
            <div className='audio_prev_btn'>
                <img alt='' src={require('../../imgs/prev.png')} />
            </div>
            {isPlay ? (
                <div onClick={this.pauseAudio}>
                    <img alt='' src={require('../../imgs/playbtn2.png')} className='audio_play_btn' />
                </div>
            ) : (
                <div onClick={this.playAudio}>
                    <img alt='' src={require('../../imgs/playbtn1.png')} className='audio_play_btn' />
                </div>
            )}
            <div className='audio_prev_btn'>
                <img alt='' src={require('../../imgs/next.png')} />
            </div>
            <div className='audio_speed_btn' onClick={() => this.changePlayRate()}>
                <p>{this.state.rateList[this.state.index]}x</p>
                <span>倍速播放</span>
            </div>
        </div>
        {/* <div onClick={this.onMuteAudio}>静音</div>
        <div>
          <span>音量调节：</span>
          <input
            type="range"
            onChange={this.changeVolume}
            value={isMuted ? 0 : volume}
          />
        </div> */}

        {/* <div>
          <span>倍速播放：</span>
          {rateList &&
            rateList.length > 0 &&
            rateList.map((item) => (
              <button
                key={item}
                style={
                  playRate === item
                    ? {
                        border: "1px solid #188eff",
                        color: "#188eff",
                      }
                    : null
                }
                onClick={() => this.changePlayRate(item)}
              >
                {item}
              </button>
            ))}
        </div> */}
      </div>
    );
  }
}

export default App;